<template>

  <div class="mx-1 border" @click="imageClick">
    <div class="relative">
      <img :alt="props.label" :src="props.url" class=" object-cover" mode="aspectFill"
           onerror="this.src='/static/h5images/no-pic.png';"
           style="width: 100%;height: 45px;object-fit: cover"/>
      <div class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
        <image class="h-5 w-5" src="/static/h5images/big.png"/>
      </div>
    </div>
    <div v-if="props.label" class="text-center text-xs mt-0.5 text-gray-500">
      {{ props.label }}
    </div>
  </div>

</template>
<script lang="ts" setup>

import {previewPic} from "@/utils/previewImage";
import {Toast} from "@/utils/toast";

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
  label: {
    type: String,
    required: false,
    default: "",
  }
})

const imageClick = () => {
  if (!props.url || props.url == "") {
    Toast("图片不存在")
    return
  }
  previewPic(props.url)
}
</script>
<style scoped>

</style>